<template>
  <div>
    <iframe class="player" :src="src"></iframe>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'Player',
  })
</script>

<script lang="ts" setup>
  const props = defineProps<{
    aid: number
    bvid: string
    cid: number
  }>()

  const src = ref(
    `https://player.bilibili.com/player.html?aid=${props.aid}&bvid=${props.bvid}&cid=${props.cid}&page=1"`,
  )
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2978613_myvu4ot2yop.css');
</style>
<style lang="less" scoped>
  .player {
    height: 573px;
    width: 854px;
    border: none;
  }
</style>
